import React, { Component } from "react";
import Child3 from "./Child3";

import { Provider, Consumer } from "./context";

// createContext它是一个函数, 执行会返回一个对象
//       提供者      消费者
// const { Provider, Consumer } = createContext();
// Provider用在父组件的外层，它必须要有一个value属性
// Consumer哪个组件需要消费，就用在那里,里面可以写一个函数
// 如果想跨组件通信，那么Provider和Consumer必须是从同一个createContext()里面解构

// const Child3 = () => {
//   return (
//     <div>
//       child3组件 -{" "}
//       <Consumer>
//         {(value) => {
//           return <span>{value.msg}</span>;
//         }}
//       </Consumer>
//     </div>
//   );
// };

class Child1 extends Component {
  render() {
    return (
      <>
        <div>child1组件</div>
        <Child3 />
      </>
    );
  }
}

class Child2 extends Component {
  render() {
    return (
      <>
        <span>child2组件</span>
        <Consumer>
          {(value) => {
            console.log(value);
            return <span>{value.count}</span>;
          }}
        </Consumer>
      </>
    );
  }
}

class App extends Component {
  state = {
    count: 10,
    msg: "hello",
  };

  render() {
    return (
      <Provider
        value={{
          count: this.state.count,
          msg: this.state.msg,
        }}
      >
        <h3>context</h3>
        <Child1 />
        <Child2 />
      </Provider>
    );
  }
}

export default App;
